<template>
  <div>
    <el-input v-model="search_permsName" class="w-50 m-2" placeholder="搜索框" size="small" prefix-icon="Search"
      style="width: 100%;min-width: 100px; margin-bottom: 10px;" />
    <div class="mt-4">
      <el-checkbox-group v-model="checkboxGroup1" size="small">
        <el-checkbox v-for="item in permsList" :label="item.permsID" v-model="item.permsID" border >
        {{ item.permsName }}
        </el-checkbox>
      </el-checkbox-group>
    </div>
    <el-button type="success" round @click="addRolePerms" size="small">保存</el-button>
  </div>
</template>
<style scoped></style>
<script lang="ts" setup>
import { computed, ref, reactive, onMounted, watch, defineEmits } from 'vue'
import api from '/@/api/sy/apiLog.js';
import { useRoute, useRouter, onBeforeRouteUpdate } from 'vue-router'
const router = useRouter();
const props = defineProps(['param']);

// 权限类 规范
interface RowPerms {
  permsID: number | null
  parentPermsID: number | null
  permsName: string | null
  permsCode: string | null
  createTime: Date | null
  updateTime: Date | null
  checkboxs:boolean|null
}
//权限集
let permsList = ref<RowPerms[]>([])

// 准备新增的权限
const checkboxGroup1 = ref([])
//搜索框 搜索需要的权限
const search_permsName = ref("")


const emit = defineEmits(['callGetRoleList']); // 定义一个名为 callGetRoleList 的自定义事件

// 指定角色新增权限
function addRolePerms(){
  var param = {
    "roleID": props.param,
    "permsIDArray":checkboxGroup1.value
  }
  api.post('public/role/addRolePerms', param).then((response: any) => {
    if(response.data.code==200){
      checkboxGroup1.value=[]
    }
  }).catch((error: any) => { }).finally(() => {
    getNOTINRolePerms()
    emit('callGetRoleList');//指挥父组件触发自己的事件
  })
}

// 获取指定角色没有的权限
function getNOTINRolePerms() {
  var param = {
    "roleID": props.param,
    "permsName":search_permsName.value
  }
  api.post('public/role/getNOTINRolePerms', param).then((response: any) => {
    permsList.value = response.data.data
  }).catch((error: any) => { }).finally(() => { console.log('必须执行') })
}

watch(search_permsName, (newVal, oldVal) => {
  getNOTINRolePerms()
}, { deep: true }) // 深层监控

onMounted(() => {
  getNOTINRolePerms();
});
</script>
    